<template>
    <div class="user">
        <div class="user-image">
            <img :src="business.avatar_cdn" />
        </div>
    </div>

    <!-- 表单结构 -->
    <van-form @submit="OnSubmit">
        <!-- 昵称 -->
        <van-field
            v-model="business.nickname"
            name="nickname"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{required: true, message: '请输入昵称'}]"
        />

        <!-- 手机号码 -->
        <van-field
            v-model="business.mobile"
            name="mobile"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
                {required: true, message: '请输入手机号码'},
                {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
            ]"
        />

        <!-- 邮箱 -->
        <van-field
            v-model="business.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[
                {required: true, message: '请输入邮箱'},
                {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确'}
            ]"
        />

        <!-- 密码 -->
        <van-field
            v-model="business.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
        />

        <!-- 性别 -->
        <van-field name="gender" label="性别">
            <template #input>
                <van-radio-group v-model="business.gender" direction="horizontal">
                    <van-radio name="0">保密</van-radio>
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>

        <!-- 地区 -->
        <van-field 
            name="region"
            label="地区选择"
            placeholder="点击选择省市区"
            v-model="business.region_text"
            readonly
            is-link
            @click="AreaShow = true"
        />

        <!-- 弹出框组件 -->
        <van-popup v-model:show="AreaShow" round position="bottom">
            <!-- 地区组件 -->
            <van-area
                v-model="code"
                title="地区选择" 
                :area-list="areaList"
                @cancel = "AreaShow = false"
                @confirm = "OnAreaConfirm"
            />
        </van-popup>

        <!-- 头像上传 -->
        <van-field label="上传头像">
            <!-- 插槽重新输入框部分，用文件上传来代替 -->
            <template #input>
                <van-uploader v-model="avatar" :max-count="1" />
            </template>
        </van-field>

        <div style="width:80%;margin:2em auto;">
            <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>

<script setup>
// 引入地区数据
import { areaList } from '@vant/area-data';

const { proxy } = getCurrentInstance();

// 获取个人资料信息
const business = proxy.$business;

// 定义loading状态
const loading = ref(false);

// 地区选择组件显示状态
const AreaShow = ref(false);
// 地区码 传参
const code = ref(business.value.district ? business.value.district : (business.value.city ? business.value.city : business.value.province));

// 上传框的值
const avatar = ref([
    {
        url:business.value.avatar_cdn
    }
]);

// 表单提交事件
const OnSubmit = async (values) =>
{
    let params = {
        id:business.value.id,
        nickname:values.nickname,
        mobile:values.mobile,
        email:values.email,
        gender:values.gender
    }

    if(values.password)
    {
        params.password = values.password;
    }

    if(code.value)
    {
        params.code = code.value;
    }

    if(avatar.value[0]?.file)
    {
        params.avatar = avatar.value[0]?.file;
    }

    let result = await proxy.$http.upload({
        url:'/business/profile',
        params
    })

    if(result.code === 1)
    {
        proxy.$success({
            message:result.msg,
            onClose:() =>
            {
                proxy.$router.back();
            }
        })
    }else{
        proxy.$fail(result.msg);
    }
}

// 地区选择确认事件
const OnAreaConfirm = ({selectedOptions}) =>
{
    // 获取省市区并且分别赋值新的变量
    const [province,city,district] = selectedOptions;

    // 存放拼接好的地区
    let RegionText = '';

    let RegionCode = 0;

    if(province.value)
    {
        RegionText = province.text + '-';
        RegionCode = province.value;
    }

    if(city.value)
    {
        RegionText += city.text + '-';
        RegionCode = city.value;
    }

    if(district.value)
    {
        RegionText += district.text;
        RegionCode = district.value;
    }

    // 关闭弹出层
    AreaShow.value = false;

    business.value.region_text = RegionText;
    code.value = RegionCode;
}
    
</script>

<style scoped>
@import url('/assets/css/BusinessProfile.css');
</style>